<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery炫酷图片碎片拼图动画特效插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link href='http://fonts.useso.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/style.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div id="body">
		<header class="htmleaf-header bgcolor-8">
			<h1>jQuery炫酷图片碎片拼图动画特效插件 <span>A plugin of jQuery-animations that provides tile animations</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Image-Effects/201507062175.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
	    <div id="description">
	      <p>
	        This page shows tile plugin usage. Click button to see the effect and source code.
	      </p>
	    </div>
	    <div id="container">
	      <img id="image" src="images/batman.png" />
	    </div>
	    <div id="settings">
	      <button id="submit">Animate</button>
	      <div>
	        <h3>Pre-defined Combinations</h3>
	        <button id="assemble" class="predefined">Assemble</button>
	        <button id="blind" class="predefined">Blind</button>
	        <button id="wave" class="predefined">Wave</button>
	        <button id="flutter" class="predefined">Flutter</button>
	        <button id="puzzle" class="predefined">Puzzle</button>
	        <button id="flake" class="predefined">Flake</button>
	        <button id="blow" class="predefined">Blow</button>
	      </div>
	      <div id="animations">
	        <input id="show-effect" class="toggle-check" type="checkbox"/>
	        <div id="effect" class="toggle-wrapper">
	          <h3><label class="options-toggle" for="show-effect">Effect</label></h3>
	          <div id="effects" class="toggle-container">
	            <div>
	              <input id="combine" type="checkbox" checked="checked"/>
	              <label for="combine">Combine</label>
	            </div>
	          </div>
	        </div>
	        <input id="show-alternate" class="toggle-check" type="checkbox"/>
	        <div id="alternate" class="toggle-wrapper">
	          <h3><label class="options-toggle" for="show-alternate">Alternate</label></h3>
	          <div id="alternates" class="toggle-container">
	            <div>
	              <input id="combine2" type="checkbox" checked="checked"/>
	              <label for="combine2">Combine</label>
	            </div>
	          </div>
	        </div>
	      </div>
	      <input id="show-options" class="toggle-check" type="checkbox"/>
	      <div id="options" class="toggle-wrapper">
	        <h3><label class="options-toggle" for="show-options">Options</label></h3>
	        <div id="options-wrap" class="toggle-container">
	          <div class="option-group global">
	            <h5>Global</h5>
	            <label for="duration">Duration</label>
	            <input type="number" id="duration" name="duration" step="100" min="0" />
	            <label for="delay">Delay</label>
	            <input type="number" id="delay" name="delay" step="100" min="0" />
	            <label for="repeat">Repeat</label>
	            <input type="number" id="repeat" name="repeat" step="1" min="0" />
	            <label for="easing">Easing</label>
	            <select id="easing" name="easing">
	              <option value=""></option>
	              <option value="linear">Linear</option>
	              <option value="ease">Ease</option>
	              <option value="ease-in">Ease In</option>
	              <option value="ease-out">Ease Out</option>
	              <option value="ease-in-out">Ease In Out</option>
	            </select>
	            <label for="direction">Direction</label>
	            <select id="direction" name="direction">
	              <option value=""></option>
	              <option value="normal">Normal</option>
	              <option value="alternate">Alternate</option>
	              <option value="alternate-reverse">Alternate Reverse</option>
	              <option value="reverse">Reverse</option>
	            </select>
	            <label for="fillMode">Fill Mode</label>
	            <select id="fillMode" name="fillMode">
	              <option value=""></option>
	              <option value="forwards">Forwards</option>
	              <option value="backwards">Backwards</option>
	              <option value="both">Both</option>
	            </select>
	            <label for="rows" class="custom">Rows</label>
	            <input type="number" id="rows" name="rows" step="1" min="0" />
	            <label for="cols" class="custom">Cols</label>
	            <input type="number" id="cols" name="cols" step="1" min="0" />
	            <label for="groups" class="custom">Groups</label>
	            <input type="number" id="groups" name="groups" step="1" min="0" />
	            <input id="sequent" name="sequent" type="checkbox" value="true" checked="checked"/>
	            <label for="sequent" class="custom">Sequent</label>
	            <label for="sequence" class="custom">Sequence</label>
	            <select id="sequence" name="sequence">
	              <option value=""></option>
	              <option value="random">Random</option>
	              <option value="randomCols">Random Columns</option>
	              <option value="randomRows">Random Rows</option>
	              <option value="lr">Left-Right</option>
	              <option value="rl">Right-Left</option>
	              <option value="tb">Top-Bottom</option>
	              <option value="bt">Bottom-Top</option>
	              <option value="lrtb">Left-Right Top-Bottom</option>
	              <option value="lrbt">Left-Right Bottom-Top</option>
	              <option value="rltb">Right-Left Top-Bottom</option>
	              <option value="rlbt">Right-Left Bottom-Top</option>
	              <option value="tblr">Top-Bottom Left-Right</option>
	              <option value="tbrl">Top-Bottom Right-Left</option>
	              <option value="btlr">Bottom-Top Left-Right</option>
	              <option value="btrl">Bottom-Top Right-Left</option>
	            </select>
	            <input id="adjustDuration" name="adjustDuration" type="checkbox" value="true" checked="checked"/>
	            <label for="adjustDuration" class="custom">Adjust Duration</label>
	            <label for="strength" class="custom">*Strength</label>
	            <input type="number" id="strength" name="strength" step="1" min="0" />
	            <label for="distance" class="custom">*Distance</label>
	            <input type="number" id="distance" name="distance" step="1" min="0" />
	            <label for="x" class="custom">*X</label>
	            <input type="number" id="x" name="x" step="1" />
	            <label for="y" class="custom">*Y</label>
	            <input type="number" id="y" name="y" step="1" />
	            <label for="relative" class="custom">Relative</label>
	            <select id="relative" name="relative" data-type="bool">
	              <option value=""></option>
	              <option value="true">True</option>
	              <option value="false">False</option>
	            </select>
	            <label for="degree" class="custom">*Degree</label>
	            <input type="number" id="degree" name="degree" step="1" />
	          </div>
	        </div>
	      </div>
	    </div>
	    <div id="code-block">
	      <h3>Source Code</h3>
	      <pre id="code">$('#image').animate('tile');</pre>
	    </div>
	  </div>

	 <div class="related">
	    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
	    <a href="http://www.htmleaf.com/css3/css3donghua/201505301934.html">
		  <img src="related/1.jpg" width="300" alt="HTML5和CSS3炫酷图片运动模糊和倾斜特效"/>
		  <h3>HTML5和CSS3炫酷图片运动模糊和倾斜特效</h3>
		</a>
		<a href="http://www.htmleaf.com/jQuery/Image-Effects/201502191395.html">
		  <img src="related/2.jpg" width="300" alt="jQuery超酷图片九宫格拼图特效插件"/>
		  <h3>jQuery超酷图片九宫格拼图特效插件</h3>
		</a>
	</div>
	<script src="http://libs.useso.com/js/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="js/jquery.animations.min.js"></script>
  	<script src="js/jquery.animations-tile.js"></script>
  	<script src="js/app.js"></script>
	
</body>
</html>